<template>
  <div class="communicate_box" ref="communicate">
    <div class="com_top">
      <div class="com_name">{{$store.state.chatChooseItem.toUserName}}</div>
      <div class="com_operate">
        <!-- <div class="report" @click="reportBtn">
          <div class="report-img"></div>
        </div> -->
        <el-popover
            placement="bottom-end"
            width="280"
            trigger="click">
            <userInfo />
            <img class="com_info" slot="reference" src="../../assets/icons/icon_3dot.png" v-show="$store.state.chatChooseItem.type==1" @click="chooseCard($store.state.chatChooseItem)" />
        </el-popover>
        <img class="com_info" src="../../assets/icons/icon_3dot.png" v-show="$store.state.chatChooseItem.type==0" @click="openDrawer"/>
      </div>
    </div>
    
    <div class="com_container" ref="com_container" @scroll="scrollWatch">
      <div class="pageHeight" ref="pageHeight">
        <div class="list_container" v-for="(item,index) in historyList" :key="index">
          <div class="list">
            <div class="msg_box other" v-if="item.messageType==1&&item.sendUserId!=$store.state.user.id">
              <el-popover
                placement="bottom-start"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>
              <div class="message_box">
                <div class="message_from">
                  <div class="send_people">{{item.sendUserName}}</div>
                  <div class="send_time">{{item.sendTime}}</div>
                </div>
                <div class="send_message" @contextmenu.prevent="getItem(item,$event)">
                  <div v-html="item.content"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="list" v-if="item.messageType==12||item.messageType==13">
            <div class="notice_box">
              <div class="notice_time">{{item.sendTime}}</div>
              <div class="notice_text">{{item.content}}</div>
            </div>
          </div>
          
          <div class="list" v-if="item.messageType==1&&item.sendUserId==$store.state.user.id">
            <div class="msg_box myself">
              <div class="message_box">
                <div class="message_from">
                  <div class="send_time">{{item.sendTime}}</div>
                  <div class="send_people">{{item.sendUserName}}</div>
                </div>
                <div class="send_message" @contextmenu.prevent="getItem(item,$event)">
                  <div class="message_state" v-if="item.readStatus==0&&$store.state.chatChooseItem.type==1">未读</div>
                  <div class="message_state read" v-if="item.readStatus==1&&$store.state.chatChooseItem.type==1">已读</div>
                  <div v-html="item.content"></div>
                </div>
              </div>
              <el-popover
                placement="bottom-end"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>
            </div>
          </div>

          <div class="list" v-if="item.messageType==9&&item.sendUserId==$store.state.user.id">
            <div class="msg_box myself">
              <div class="message_box">
                <div class="message_from">
                  <div class="send_time">{{item.sendTime}}</div>
                  <div class="send_people">{{item.sendUserName}}</div>
                </div>
                <div class="send_message" @contextmenu.prevent="getItem(item,$event)">
                  <div class="message_state" v-if="item.readStatus==0">未读</div>
                  <div class="message_state read" v-if="item.readStatus==1">已读</div>
                  <div class="file_box">
                    <div class="text_box">
                      <p class="file_name">{{item.ext.fileName}}</p>
                      <p class="file_size">{{item.ext.fileSize}}</p>
                    </div>
                    <img class="file_icon" v-if="item.ext.fileType=='mp4'||item.ext.fileType=='mkv'||item.ext.fileType=='avi'||item.ext.fileType=='rmvb'" src="../../assets/video.png" />
                    <img class="file_icon" v-else-if="item.ext.fileType=='png'||item.ext.fileType=='jpg'||item.ext.fileType=='jpeg'" src="../../assets/picture.png" />
                    <img class="file_icon" v-else src="../../assets/file.png" />
                  </div>
                </div>
              </div>
              <el-popover
                placement="bottom-end"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>
            </div>
          </div>

          <div class="list" v-if="item.messageType==9&&item.sendUserId!=$store.state.user.id">
            <div class="msg_box other">
              <el-popover
                placement="bottom-start"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>
              <div class="message_box">
                <div class="message_from">
                  <div class="send_people">{{item.sendUserName}}</div>
                  <div class="send_time">{{item.sendTime}}</div>
                </div>
                <div class="send_message" @contextmenu.prevent="getItem(item,$event)">
                  <div class="file_box">
                    <img class="file_icon" v-if="item.ext.fileType=='mp4'||item.ext.fileType=='mkv'||item.ext.fileType=='avi'||item.ext.fileType=='rmvb'" src="../../assets/video.png" />
                    <img class="file_icon" v-else-if="item.ext.fileType=='png'||item.ext.fileType=='jpg'||item.ext.fileType=='jpeg'" src="../../assets/picture.png" />
                    <img class="file_icon" v-else src="../../assets/file.png" />
                    <div class="text_box">
                      <p class="file_name">{{item.ext.fileName}}</p>
                      <p class="file_size">{{item.ext.fileSize}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="list" v-if="item.messageType==4&&item.sendUserId==$store.state.user.id">
            <div class="msg_box myself">
              <div class="message_box">
                <div class="message_from">
                  <div class="send_time">{{item.sendTime}}</div>
                  <div class="send_people">{{item.sendUserName}}</div>
                </div>

                <div class="share_box" @contextmenu.prevent="getItem(item,$event)">
                  <div class="message_state" v-if="item.readStatus==0">未读</div>
                  <div class="message_state read" v-if="item.readStatus==1">已读</div>
                  <div class="share_card">
                    <img class="share_avatar" :src="item.ext.img" />
                    <span class="share_name">{{item.ext.name}}</span>
                  </div>
                  <div class="share_bottom">
                    <img class="share_bottom_icon" src="../../assets/presonal.png" />
                    <span class="share_type">{{item.ext.type==1?'个人':'群'}}名片</span>
                  </div>
                </div>

              </div>
              <el-popover
                placement="bottom-end"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>
            </div>
          </div>

          <div class="list" v-if="item.messageType==4&&item.sendUserId!=$store.state.user.id">
            <div class="msg_box other">
              <el-popover
                placement="bottom-end"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>

              <div class="message_box">
                <div class="message_from">
                  <div class="send_people">{{item.sendUserName}}</div>
                  <div class="send_time">{{item.sendTime}}</div>
                </div>

                <div class="share_box" @contextmenu.prevent="getItem(item,$event)">
                  <div class="share_card">
                    <img class="share_avatar" :src="item.ext.img" />
                    <span class="share_name">{{item.ext.name}}</span>
                  </div>
                  <div class="share_bottom">
                    <img class="share_bottom_icon" src="../../assets/presonal.png" />
                    <span class="share_type">{{item.ext.type==1?'个人':'群'}}名片</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="list" v-if="item.messageType==2&&item.sendUserId==$store.state.user.id">
            <div class="msg_box myself">
              <div class="message_box">
                <div class="message_from">
                  <div class="send_time">{{item.sendTime}}</div>
                  <div class="send_people">{{item.sendUserName}}</div>
                </div>

                <div class="picture_box" @contextmenu.prevent="getItem(item,$event)">
                  <div class="message_state" v-if="item.readStatus==0">未读</div>
                  <div class="message_state read" v-if="item.readStatus==1">已读</div>
                  <img class="send_pic" :src="item.contentImg" @click="visitBigPic(item.contentImg)" />
                </div>

              </div>
              <el-popover
                placement="bottom-end"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>
            </div>
          </div>

          <div class="list" v-if="item.messageType==2&&item.sendUserId!=$store.state.user.id">
            <div class="msg_box other">
              <el-popover
                placement="bottom-end"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>

              <div class="message_box">
                <div class="message_from">
                  <div class="send_people">{{item.sendUserName}}</div>
                  <div class="send_time">{{item.sendTime}}</div>
                </div>

                <div class="picture_box" @contextmenu.prevent="getItem(item,$event)">
                  <img class="send_pic" :src="item.contentImg" @click="visitBigPic(item.contentImg)"/>
                  <!-- <div class="message_state" v-if="item.readStatus==0">未读</div>
                  <div class="message_state read" v-if="item.readStatus==1">已读</div> -->
                </div>
              </div>
            </div>
          </div>

          <div class="list" v-if="item.messageType==3&&item.sendUserId==$store.state.user.id">
            <div class="msg_box myself">
              <div class="message_box">
                <div class="message_from">
                  <div class="send_time">{{item.sendTime}}</div>
                  <div class="send_people">{{item.sendUserName}}</div>
                </div>

                <div class="video_box" @contextmenu.prevent="getItem(item,$event)">
                  <div class="message_state" v-if="item.readStatus==0">未读</div>
                  <div class="message_state read" v-if="item.readStatus==1">已读</div>
                  <!-- <img class="video_pic" src="../../assets/qrcode_bg.png" /> -->
                  <video class="video_pic" :src="item.contentVideo"></video>
                  <img class="play_icon" src="../../assets/play.png" @click="visitBigVideo(item.contentVideo)"/>
                </div>

              </div>
              <el-popover
                placement="bottom-end"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>
            </div>
          </div>

          <div class="list" v-if="item.messageType==3&&item.sendUserId!=$store.state.user.id">
            <div class="msg_box other">
              <el-popover
                placement="bottom-end"
                width="280"
                trigger="click">
                <userInfo />
                <img class="com_avatar" slot="reference" :src="item.sendUserImg" @click="chooseComCard(item)"/>
              </el-popover>

              <div class="message_box">
                <div class="message_from">
                  <div class="send_people">{{item.sendUserName}}</div>
                  <div class="send_time">{{item.sendTime}}</div>
                </div>

                <div class="video_box" @contextmenu.prevent="getItem(item,$event)">
                  <video class="video_pic" :src="item.contentVideo"></video>
                  <img class="play_icon" src="../../assets/play.png" @click="visitBigVideo(item.contentVideo)"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="com_write_box">
      <ul class="com_operate_line">
        <el-popover
          placement="top"
          width="280"
          trigger="click">
          <div class="emoji_box">
            <img class="emoji_icon" :src="'data:image/png;base64,'+ item[2]" v-for="(item,index) in emojiList" :key="index" @click="chooseEmoji(item)"/>
          </div>
          <li class="operate_btn emoji_btn" title="选择表情" slot="reference"></li>
        </el-popover>
        <el-upload :action="baseApi+'top/upload/ossFile'" accept=".png,.jpg,.jpeg" :before-upload="onBeforeUploadFile" :on-change="fileChange" :http-request="sendImg" :show-file-list="false">
            <li class="operate_btn picture_btn" title="发送图片" trigger></li>
        </el-upload>
        <el-upload :action="baseApi+'top/upload/ossFile'" :before-upload="onBeforeUploadFile" :on-change="fileChange" :http-request="fileRequest" :show-file-list="false">
            <li class="operate_btn file_btn" title="发送文件" trigger></li>
        </el-upload>
        <el-upload :action="baseApi+'top/upload/ossFile'" accept=".avi,.mov,.asf,.mpeg,.mpg,.navi,.mkv,.rmvb,.mod,.mp4" :before-upload="onBeforeUploadFile" :on-change="fileChange" :http-request="sendVideo" :show-file-list="false">
            <li class="operate_btn video_btn" title="发送视频" trigger></li>
        </el-upload>

        <el-popover
          placement="top-start"
          width="342"
          trigger="click">
          
          <div class="choose_share_top">
            <div class="choose_share_title">选择需要提醒的人</div>
            <!-- <img class="close" src="../../assets/icons/icon_close_up.png" /> -->
          </div>
          <!-- <div class="choose_share_search">
            <img class="search_icon" src="../../assets/icons/icon_search.png" />
            <input class="search_input" type="text" placeholder="请输入群成员名称"/>
          </div> -->

          <ul class="friends_box">
            <!-- <li class="friends_line" @click="remindMember">
              <img class="friends_avatar" src="../../assets/test_avatar.jpg" />
              <span class="friends_name">提醒所有人</span>
            </li> -->
            <li class="friends_line" @click="remindMember(item)" v-for="(item,index) in memberList" :key="index">
              <img class="friends_avatar" :src="item.userHeadImg" />
              <span class="friends_name">{{item.nickName}}</span>
            </li>
          </ul>

          <li class="operate_btn call_all_btn" title="@" slot="reference" v-show="$store.state.chatChooseItem.type==0"></li>
        </el-popover>

        <el-popover
          placement="top-start"
          width="342"
          trigger="click"
          popper-class="shareFrinedPop">
          
          <div class="choose_share_top">
            <div class="choose_share_title">选择推荐的好友</div>
            <!-- <img class="close" src="../../assets/icons/icon_close_up.png" /> -->
          </div>
          <div class="choose_share_search">
            <img class="search_icon" src="../../assets/icons/icon_search.png" />
            <input class="search_input" type="text" placeholder="请输入好友名称" v-model="shareFriendText" @input="changeFriendText"/>
          </div>

          <li class="friends_line" v-for="(item,index) in friendList" :key="index" @click="openShareDialog(item)">
            <img class="friends_avatar" :src="item.friendHeadImg" />
            <span class="friends_name">{{item.friendRemarks}}</span>
          </li>

          <!-- <ul class="friends_box">
            <div class="pingyin_list" v-for="(item,index) in list" :key="index">
              <div class="pingyin_first">{{item.title}}</div>
              <li class="friends_line" v-for="(data,dataIndex) in item.children" :key="dataIndex" @click="openShareDialog">
                <img class="friends_avatar" :src="data.img" />
                <span class="friends_name">{{data.name}}</span>
              </li>
            </div>
          </ul> -->

          <li class="operate_btn share_friend_btn" title="推荐好友" slot="reference" @click="changeShareType(1)"></li>
        </el-popover>

        <el-popover
          placement="top-start"
          width="342"
          trigger="click">
          
          <div class="choose_share_top">
            <div class="choose_share_title">选择推荐的群聊</div>
            <!-- <img class="close" src="../../assets/icons/icon_close_up.png" /> -->
          </div>
          <div class="choose_share_search">
            <img class="search_icon" src="../../assets/icons/icon_search.png" />
            <input class="search_input" type="text" placeholder="请输入群聊名称" v-model="shareGroupText" @input="changeGroupText" />
          </div>

          <ul class="friends_box">
            <li class="friends_line" @click="openShareDialog(item)" v-for="(item,index) in shareGroupList" :key="index">
              <img class="friends_avatar" :src="item.roomImg" />
              <span class="friends_name">{{item.roomName}}</span>
            </li>
          </ul>

          <li class="operate_btn share_group_btn" title="分享群聊" slot="reference" @click="changeShareType(0)"></li>
        </el-popover>
        <!-- <li class="operate_btn phone_btn" title="语音通话"></li>
        <li class="operate_btn video_phone_btn" title="视频通话"></li> -->
      </ul>

      <div class="chat_editor" ref="sendContent" contenteditable="true" @click="inputClick($event)" @keyup="keyPress($event)" @input="changeInput"></div>

      <div class="com_send_bottom">
        <div class="send_tips">
          Ctrl+Enter：换行
          <span style="padding:0px 10px;">|</span>
          Enter：发送
        </div>
        <div class="primarybtn" @click="sendMessage">发送</div>
      </div>
    </div>

    <forward :forwardState="forwardState" v-show="forwardState" @changeForwardState="changeForwardState"/>

    <ul class="contextmenu" v-if="contextmenuState" ref="contextmenuEle">
      <!-- <li class="context_select">撤回</li>
      <li class="context_select">复制</li>
      <li class="context_select" @click="openForward">转发</li> -->
      <li class="context_select" v-if="this.mouseItem.messageType==9" @click="downLoadFile">另存为</li>
      <!-- <li class="context_select" @click="openDeleteMessageDialog">删除</li> -->
    </ul>
    
    <el-dialog
      :visible.sync="reportDialogState"
      width="397px"
      :show-close="false"
      :close-on-click-modal="false">

      <div class="dialog_title">举报投诉</div>
      <div class="report_box">
        <textarea class="report_text" maxlength="500" v-model="reportText" placeholder="请填写投诉举报原因"></textarea>
        <div class="report_num">0/500</div>
      </div>
      <div class="btns_box">
        <div class="primarybtn default" @click="cancelIgnoreDialog">取消</div>
        <div class="primarybtn">提交</div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="deleteMessageDialog"
      width="290px"
      :show-close="false"
      :close-on-click-modal="false">

      <div class="dialog_tips">确定删除该消息吗？</div>
      <div class="btns_box">
        <div class="primarybtn default" @click="cancelDeleteMessageDialog">取消</div>
        <div class="primarybtn">确定</div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="shareDialog"
      width="268px"
      :show-close="false"
      :close-on-click-modal="false">

      <div class="card_container">
        <div class="share_card_title">好友推荐</div>
        <div class="share_dialog_card">
          <div class="share_in">
            <img class="share_card_avatar" :src="shareItem.friendHeadImg?shareItem.friendHeadImg:shareItem.roomImg" />
            <span class="share_card_name">{{shareItem.userName?shareItem.userName:shareItem.roomName}}</span>
          </div>
          <div class="card_type">{{shareItem.roomName?'群':'个人'}}名片</div>
        </div>
        <div class="share_tips">将名片分享给该用户</div>
        <div class="receiver">
          <img class="receiver_avatar" :src="shareItem.friendHeadImg?shareItem.friendHeadImg:shareItem.roomImg"/>
          <span class="receiver_name">{{shareItem.userName?shareItem.userName:shareItem.roomName}}</span>
        </div>
        <div class="share_btns">
          <div class="primarybtn default" @click="cancelShareDialog">取消</div>
          <div class="primarybtn" @click="sendPostCard">发送名片</div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="showBigPic"
      custom-class="bigPic_box"
      :show-close="true"
      :close-on-click-modal="false"
      :center="true"
      :fullscreen="true"
      :close-on-press-escape="true"
      :before-close="closeBigDialog"
      :destroy-on-close="true">

      <img class="big_pic" :src="bigPicUrl"/>
    </el-dialog>

    <el-dialog
      :visible.sync="showBigVideo"
      custom-class="bigVideo_box"
      :show-close="true"
      :close-on-click-modal="false"
      :center="true"
      :fullscreen="true"
      :close-on-press-escape="true"
      :before-close="closeBigDialog"
      :destroy-on-close="true">

      <video class="big_video" :src="bigVideoUrl" controls autoplay></video>
    </el-dialog>

    <div class="drawer_box" v-if="rightDrawer">
      <div class="drawer_top">
        <div class="tag_box">
          <div :class="['tag_name',{'active':chooseState=='1'}]" @click="changeTag(1)">群信息</div>
          <div :class="['tag_name',{'active':chooseState=='2'}]" @click="changeTag(2)">群成员</div>
          <!-- <div :class="['tag_name',{'active':chooseState=='3'}]" @click="changeTag(3)" v-if="$store.state.isQunzhu||$store.state.isGuanli">群管理</div> -->
        </div>
        <img class="arrow_icon" src="../../assets/arrow.png" @click="closeDrawer"/>
      </div>

      <div class="group_message" v-show="chooseState==1">
        <div class="drawer_center">
          <div class="group_avatar_box">
            <img class="group_avatar" :src="$store.state.groupImg"/>
            <div class="upload_pic_box" @click="openCropper" v-if="$store.state.isQunzhu||$store.state.isGuanli">
              <img class="upload_pic" src="../../assets/upload_pic.png">
            </div>
          </div>
          <div class="group_name_box">
            <span class="group_name">{{$store.state.groupName}}</span>
            <img class="edit_icon" src="../../assets/icons/icon_modify_up.png" @click="openNick" v-if="$store.state.isQunzhu||$store.state.isGuanli"/>
          </div>
          <!-- <div class="share_group share_icon" @click="sendCard"></div>
          <div class="share_qrcode share_icon" @click="openQrcode"></div> -->
        </div>
        <div class="drawer_container">
          <div class="drawer_line">
            <div class="group_set_title">群人数</div>
            <div class="line_value_box line_click">
              <div class="line_value">{{$store.state.groupMembersList.length}}人</div>
            </div>
          </div>
          <div class="drawer_line">
            <div class="group_set_title">群简介</div>
            <div class="line_value_box line_click">
              <div class="line_value">{{$store.state.groupRemarks}}</div>
              <img class="edit_icon" src="../../assets/arrow.png" @click="openBrief" v-if="$store.state.isQunzhu||$store.state.isGuanli">
            </div>
          </div>
          <div class="drawer_line">
            <div class="group_set_title">群公告</div>
            <div class="line_value_box line_click">
              <div class="line_value">{{$store.state.groupNotice}}</div>
              <img class="edit_icon" src="../../assets/arrow.png" @click="openNotice" v-if="$store.state.isQunzhu||$store.state.isGuanli">
            </div>
          </div>
          <!-- <div class="drawer_line">
            <div class="group_set_title">群主</div>
            <div class="line_value_box">
              <div class="line_value">爱因斯坦</div>
            </div>
          </div> -->
          <div class="drawer_line">
            <div class="group_set_title">本群昵称</div>
            <div class="line_value_box line_click">
              <div class="line_value">{{$store.state.groupName}}</div>
              <img class="edit_icon" src="../../assets/arrow.png" @click="openNick" v-if="$store.state.isQunzhu||$store.state.isGuanli">
            </div>
          </div>
          <!-- <div class="drawer_line">
            <div class="group_set_title">消息免打扰</div>
            <div class="line_value_box line_click">
              <el-switch v-model="msgDisturb" @change="changeDisturb" :width="28"></el-switch>
              <span class="disturb_text">正常</span>
            </div>
          </div> -->
        </div>
      </div>
      
      <div class="group_members" v-show="chooseState==2">
        <div class="search_in">
          <img class="search_in_icon" src="../../assets/icons/icon_search.png" />
          <input class="search_in_input" placeholder="搜索群成员" @focus="searchFocus" v-model="groupMemberText" @input="getSearchGroupMemberList"/>
          <img class="search_clear" src="../../assets/icons/icon_delete_up.png" v-show="searchState" @click="searchBlur"/>
        </div>
        <ul class="group_members_box" v-show="!searchState">
          <div class="member_block group_btn_block" @click="addMembers" v-if="$store.state.isQunzhu||$store.state.isGuanli">
            <img class="member_avatar group_opt_btn" src="../../assets/icons/icon_add_up.png" />
            <div class="member_name">添加</div>
          </div>
          <div class="member_block group_btn_block" @click="reduceMembers" v-if="$store.state.isQunzhu||$store.state.isGuanli">
            <img class="member_avatar group_opt_btn" src="../../assets/icons/icon_minus_up.png" />
            <div class="member_name">删除</div>
          </div>

          <el-popover v-for="(item,index) in $store.state.groupMembersList" :key="index"
              placement="bottom-end"
              width="280"
              trigger="click">
              <userInfo :groupMemberInfo="item" v-if="item" />
              <li class="member_block" slot="reference" @click="chooseCard(item)">
                <img class="member_avatar" :src="item.userHeadImg" />
                <div class="member_name">{{item.userName}}</div>
                <img class="qunzhu" src="../../assets/qunzhu.png" v-if="item.userRole==99">
                <img class="qunzhu" src="../../assets/qunguan.png" v-if="item.userRole==1">
              </li>
          </el-popover>
        </ul>

        <ul class="member_list" v-show="searchState">
          <el-popover v-for="(item,index) in searchGroupMemberList" :key="index"
              placement="bottom-end"
              width="280"
              trigger="click">
              <userInfo />
              <li class="member_list_line" slot="reference" @click="chooseCard(item)">
                <img class="member_avatar" :src="item.userHeadImg"/>
                <span class="member_list_name">{{item.userName}}</span>
                <img class="group_post" v-if="item.userRole==99" src="../../assets/qunzhu.png">
                <img class="group_post" v-if="item.userRole==1" src="../../assets/qunguan.png">
              </li>
          </el-popover>
        </ul>
      </div>

      <div class="group_manager" v-show="chooseState==3">
        <!-- <div class="drawer_line manager_line">
          <div class="group_set_title">群内互加好友</div>
          <el-switch v-model="addFriendAble" :width="28"></el-switch>
        </div>
        <div class="drawer_line manager_line">
          <div class="group_set_title">开启群员邀请</div>
          <el-switch v-model="membersInvite" :width="28"></el-switch>
        </div>
        <div class="drawer_line manager_line">
          <div class="group_set_title">邀请审核</div>
          <el-switch v-model="inviteApply" :width="28"></el-switch>
        </div>

        <div class="drawer_line manager_line">
          <div class="group_set_title">全员禁言</div>
          <el-switch v-model="allBan" :width="28"></el-switch>
        </div>
        <div class="drawer_line manager_line">
          <div class="group_set_title">禁言名单</div>
          <span class="group_line_value" @click="openBanMembersList">1人></span>
        </div> -->

        <div class="group_btns">
          <div class="group_button" @click="openQuitGroup">退出群</div>
          <div class="group_button" @click="openBreakGroup" v-if="$store.state.isQunzhu">解散群</div>
          <!-- <div class="group_button" @click="openOverGroup">转让群</div> -->
        </div>
      </div>
    </div>
    <groupDialog :propData="propData" @changePropData="changePropData"/>
    <chooseMembers :chooseUserData="chooseUserData" v-show="chooseUserData.chooseUserState" @changeChooseState="changeChooseState"/>
    <shareCard :shareCardState="shareCardState" v-show="shareCardState" @changeShareCardState="changeShareCardState" />
    <qrcode :showQrcode="showQrcode" @cancelQrcode="cancelQrcode" />
    <cropper :cropperData="cropperData" @cancelCropper="cancelCropper" />
  </div>
</template>

<script>
import userInfo from '../user_info'
import forward from '../forward'
import groupDialog from '../group_dialog'
import chooseMembers from '../choose_members'
import shareCard from '../share_card'
import qrcode from '../qrcode'
import cropper from '../cropper'
import {Popover,Dialog,Switch,Upload,Message} from 'element-ui'
import {getEmojiList} from '../../api/emoji/emoji-list-with-image'
import '../../api/emoji/emoji'
import bus from '../../bus'
import {uploadFile,chatList,roomChatList,friendsList,groupList,getInfo,groupMemberList} from '../../api/api'
// import WebSocketClass from '../../api/websocket';
// import {websocket} from '../../api/minxin/websocket'
export default {
  name:'communicateOne',
  // mixins: [websocket],
  data(){
    return {
      socket:'',
      socketUrl:'',
      reportText:'',
      reportDialogState:false,
      contextmenuState:false,
      deleteMessageDialog:false,
      forwardState:false,
      rightDrawer:false,
      searchState:false,
      msgDisturb:false,
      chooseState:1,
      addFriendAble:true,
      membersInvite:true,
      inviteApply:true,
      allBan:false,
      propData:{//子组件弹窗状态
        briefDialogState:false,
        noticeDialogState:false,
        nickDialogState:false,
        banDialogState:false,
        deleteDialogState:false,
        quitDialogState:false,
        breakDialogState:false,
        overDialogState:false,
        banMembersDialogState:false,
        removeBanDialogState:false
      },
      chooseUserData:{
        type:'',
        chooseUserState:false
      },
      shareDialog:false,
      shareCardState:false,
      showQrcode:false,
      listMaxHeight:0,
      cropperData:{
        type:'group',
        cropperState:false,
      },
      emojiList:[],
      uploadFileData:{
        fileSize:'',
        ossKey:'im'
      },
      friendList:[],
      shareGroupList:[],
      shareItem:'',
      shareType:0,
      // list:
      // [
      //   {
      //     title:'A',
      //     children:[
      //       {
      //         img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
      //         name:'测试'
      //       },
      //       {
      //         img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
      //         name:'猫'
      //       }
      //     ]
      //   },
      //   {
      //     title:'C',
      //     children:[
      //       {
      //         img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
      //         name:'测试'
      //       },
      //       {
      //         img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
      //         name:'猫'
      //       }
      //     ]
      //   }
      // ],
      memberList:[],
      atList:[],
      offset:0,
      childLine:0,
      inputText:"",
      baseApi:'',
      historyList:[],
      page:1,
      shareFriendText:'',
      shareGroupText:'',
      sendData:'',//消息实体
      mouseItem:'',
      searchGroupMemberList:[],//搜索群成员列表
      groupMemberText:'',
      showBigPic:false,
      bigPicUrl:'',
      showBigVideo:false,
      bigVideoUrl:''
    }
  },
  components: {
    userInfo,
    forward,
    groupDialog,
    chooseMembers,
    qrcode,
    shareCard,
    cropper,
    'el-dialog':Dialog,
    'el-popover':Popover,
    'el-switch':Switch,
    'el-upload':Upload
  },
  mounted(){
    this.emojiList = getEmojiList()[0];
    bus.$on('close',msg => {
      this.contextmenuState = msg
    })
    
    bus.$on('closeDrawer',msg => {
      this.rightDrawer = msg
    })

    this.baseApi = process.env.VUE_APP_BASE_API

    this.socketUrl = this.$store.state.wsUrl
    // this.historyList = []
    // this.initTalkHistory(()=>{
    //   this.$refs.com_container.scrollTop = 9999
    // })

    this.friendList = JSON.parse(JSON.stringify(this.$store.state.friendList))
    this.shareGroupList = JSON.parse(JSON.stringify(this.$store.state.groupList))
  },
  methods:{
    initTalkHistory(callbackFn){
      console.log('查聊天历史')
      if(this.$store.state.chatChooseItem.type==1){//好友聊天历史
        if(this.historyList&&this.historyList.length!=0){
          var globalId = this.historyList[0].globalId
        }else{
          var globalId = 0
        }
        let params = {
            sendUserId:this.$store.state.user.id,
            toId:this.$store.state.chatChooseItem.toId,
            globalId:globalId,
            pageSize:100
        }
        chatList(params)
        .then(res => {
            var list = res.data.data.list.sort(function (a, b) {
                return a.globalId - b.globalId
            })
            this.historyList = list.concat(this.historyList)
            this.historyList.forEach((ele)=>{
              if(ele.ext&&ele.ext.constructor !== Object){
                ele.ext = JSON.parse(ele.ext)
              }
              if(ele.content&&ele.messageType===1&&ele.messageType===0){
                ele.content = this.dealContent(ele)
              }
              ele.sendTime = this.getYMDHMS(ele.sendTime)
            })
            this.$nextTick(() => {
              callbackFn&&callbackFn()
            })
        })
      }else if(this.$store.state.chatChooseItem.type==0){//群聊天历史
        if(this.historyList&&this.historyList.length!=0){
          var globalId = this.historyList[0].globalId
        }else{
          var globalId = 0
        }
        let params = {
            sendUserId:this.$store.state.user.id,
            toId:this.$store.state.chatChooseItem.toId,
            globalId:globalId,
            pageSize:500
        }
        roomChatList(params)
        .then(res => {
            var list = res.data.data.list.sort(function (a, b) {
                return a.globalId - b.globalId
            })
            this.historyList = list.concat(this.historyList)
            this.historyList.forEach((ele)=>{
              if(ele.ext&&ele.ext.constructor !== Object){
                ele.ext = JSON.parse(ele.ext)
              }
              if(ele.content&&ele.messageType===1&&ele.messageType===0){
                ele.content = this.dealContent(ele)
              }
              ele.sendTime = this.getYMDHMS(ele.sendTime)
            })

            this.memberList = JSON.parse(JSON.stringify(this.$store.state.groupMembersList))
            
            this.$nextTick(() => {
              callbackFn&&callbackFn()
            })
        })
      }
    },
    //获取搜索群成员列表
    getSearchGroupMemberList(){
      let params = {
          pageNo:1,
          pageSize:500,
          roomName:this.$store.state.groupName,
          roomId:this.$store.state.choosedGroupId,
          nickName:this.groupMemberText
      }
      //加载群成员列表
      groupMemberList(params)
      .then(res => {
        this.searchGroupMemberList = res.data.data.list
      })
    },
    //
    changeShareType(num){
      this.shareType = num
    },
    //下载文件
    downLoadFile(){
      window.location.href = this.mouseItem.content.fileUrl
    },
    //选择卡片
    chooseCard(item){
      console.log(item)
      this.$store.commit('getCardItem',item)
    },
    //选择聊天卡片
    chooseComCard(item){
      item.takeSendUserId = 1
      this.$store.commit('getCardItem',item)
    },
    //看大图
    visitBigPic(url){
      this.bigPicUrl = url
      this.showBigPic = true
    },
    //看视频
    visitBigVideo(url){
      this.bigVideoUrl = url
      this.showBigVideo = true
    },
    closeBigDialog(){
      this.showBigPic = false
      this.showBigVideo = false
    },
    //打开转发弹窗
    openForward(){
      this.forwardState = true
    },
    //触发转发弹窗
    changeForwardState(value){
      this.forwardState = value
    },
    //更改群消息免打扰状态
    changeDisturb(val){

    },
    //选中Tag
    changeTag(val){
      this.chooseState = val
    },
    //聚焦搜索框
    searchFocus(){
      this.searchGroupMemberList = JSON.parse(JSON.stringify(this.$store.state.groupMembersList))
      this.searchState = true
    },
    //失焦搜索框
    searchBlur(){
      this.searchState = false
    },
    openDeleteMessageDialog(){
      this.deleteMessageDialog = true
    },
    cancelDeleteMessageDialog(){
      this.deleteMessageDialog = false
    },
    //打开右侧弹出框
    openDrawer(){
      this.rightDrawer = true
    },
    //关闭右侧弹出框
    closeDrawer(){
      this.rightDrawer = false
    },
    //打开退出群确认弹窗
    openQuitGroup(){
      this.propData.quitDialogState = true
    },
    //打开解散群确认弹窗
    openBreakGroup(){
      this.propData.breakDialogState = true
    },
    //打开转让群弹窗
    openOverGroup(){
      this.propData.overDialogState = true
    },
    //打开禁言成员的弹窗
    openBanMembersList(){
      this.propData.banMembersDialogState = true
    },
    //打开群简介弹窗
    openBrief(){
      this.propData.briefDialogState = true
    },
    //打开群公告弹窗
    openNotice(){
      this.propData.noticeDialogState = true
    },
    //打开禁言弹窗
    openBanTime(){
      this.propData.banDialogState = true
    },
    //打开群昵称弹窗
    openNick(){
      this.propData.nickDialogState = true
    },
    changePropData(data){
      this.propData = data
    },
    //添加群成员
    addMembers(){
      this.chooseUserData.type = 'addMember'
      this.chooseUserData.chooseUserState = true
    },
    //删除群成员
    reduceMembers(){
      this.chooseUserData.type = 'deleteMember'
      this.chooseUserData.chooseUserState = true
    },
    changeChooseState(value){
      this.chooseUserData = value
    },
    //点击分享名片
    sendCard(){
      this.shareCardState = true
    },
    //触发发送名片弹窗
    changeShareCardState(value){
      this.shareCardState = value
    },
    openShareDialog(item){
      console.log(item)
      this.shareItem = item
      this.shareDialog = true
    },
    cancelShareDialog(){
      this.shareDialog = false
    },
    //打开用户信息二维码弹窗
    openQrcode(){
      this.showQrcode = true
    },
    cancelQrcode(qrCodeState){
      this.showQrcode = qrCodeState
    },
    //打开图片裁剪弹窗
    openCropper(){
      this.cropperData.type = 'group'
      this.cropperData.cropperState = true
    },
    cancelCropper(val){
      this.cropperData.cropperState = val
    },
    //上传文件前
    onBeforeUploadFile(file){
      console.log('before')
      // console.log(file)
      this.uploadFileData.fileSize = file.size

      // if (file.size > 10 * 1024 * 1024)
      // return this.openMessage("图片大小不能超过10M");
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      console.log('change')
    },
    //发送文件
    fileRequest(opt){
      console.log('file',opt.file)
      var fd = new window.FormData()
      // 配置post请求的参数。参数名files,后面跟要传的文件，参数名fileSize，值为文件大小（看后端的具体要求）
      fd.append('fileSize', this.uploadFileData.fileSize)
      fd.append('ossKey', this.uploadFileData.ossKey)
      fd.append('files', opt.file)
      uploadFile(fd)
      .then(res => {
        this.sendData = ''
        if(this.$store.state.chatChooseItem.type==1){
          var cmd = 101
        }else if(this.$store.state.chatChooseItem.type==0){
          var cmd = 103
        }
        this.sendData = {
            cmd:cmd,//101是发给好友，103是发群聊
            message:{
                content:"",
                contentImg:"",
                contentVideo:"",
                messageType:9,
                sendTime:new Date().getTime(),
                sendUserId:this.$store.state.user.id,
                sendUserImg:this.$store.state.user.headImg,
                sendUserName:this.$store.state.user.userName,
                toId:this.$store.state.chatChooseItem.toId,
                toUserImg:this.$store.state.chatChooseItem.toUserImg,
                toUserName:this.$store.state.chatChooseItem.toUserName,
                ext:{
                  fileSize:(opt.file.size/1024/1024).toFixed(2)+'MB',
                  fileName:opt.file.name,
                  fileUrl:res.data.data.path,
                  fileType:opt.file.name.split('.')[1]
                }
            },
            type:29
          }
          ws.send(JSON.stringify(this.sendData))
      })
    },
    //艾特@群成员
    remindMember(item){
      // var inputRemindEle = '<span style="color:#3596fc;">@'+item.name+' </span>'
      var inputRemindEle = '[@'+item.userName+']'
      this.insertStrToInput(inputRemindEle)
      this.atList.push(item.userId)
      this.atList = [...new Set(this.atList)]
      // console.log('atList',this.atList)
    },
    //选择表情
    chooseEmoji(item){
      var inputEmojiEle = '['+ item[0] +']'
      this.insertStrToInput(inputEmojiEle)
    },
    //输入框插入字符串
    insertStrToInput(ele){
      var groupEle = this.$refs.sendContent.getElementsByTagName('div')
      if(groupEle.length!=0){
        groupEle[this.childLine].innerHTML = groupEle[this.childLine].innerHTML.replace(/&nbsp;/g," ")
        var str = this.insertStr(groupEle[this.childLine].innerHTML,this.offset,ele)
        groupEle[this.childLine].innerHTML = str
      }else{
        this.$refs.sendContent.innerHTML = this.$refs.sendContent.innerHTML.replace(/&nbsp;/g," ")
        var str = this.insertStr(this.$refs.sendContent.innerHTML,this.offset,ele)
        this.$refs.sendContent.innerHTML = str
      }
      this.offset+=ele.length
      console.log(str)
    },
    inputClick(event){
      var selection = window.getSelection()
      var range = selection.getRangeAt(0)

      console.log(range)
      console.log(range.endContainer)
      console.log(range.endOffset)

      var endDom = range.endContainer
      var offset = range.endOffset

      if(!endDom.setAttribute){
        var domEle = endDom.parentNode
        this.offset = offset
      }else{
        var domEle = endDom
        this.offset = 0
      }

      if(domEle.getAttribute('class')){
        var pEle = domEle
      }else{
        var pEle = domEle.parentNode
      }

      var divDoms = pEle.getElementsByTagName('div')
      divDoms.forEach((ele,index)=>{
        ele.setAttribute('index',index)
        if(ele.getAttribute('index')==domEle.getAttribute('index')){
          this.childLine = index
        }
      })
      this.inputText = this.$refs.sendContent.innerHTML

      // console.log(endDom)
      // console.log(offset)
    },
    //键盘输入
    keyPress(event){
      var e = event || window.event, ec = e.keyCode || e.which;
      this.inputClick()
      //换行
      if (e.ctrlKey && 13 == ec) {
        var groupEle = this.$refs.sendContent.getElementsByTagName('div')
        if(groupEle.length!=0){
          groupEle[this.childLine].innerHTML = groupEle[this.childLine].innerHTML.replace(/&nbsp;/g," ")
          var str = this.insertStr(groupEle[this.childLine].innerHTML,this.offset,',')
        }else{
          this.$refs.sendContent.innerHTML = this.$refs.sendContent.innerHTML.replace(/&nbsp;/g," ")
          var str = this.insertStr(this.$refs.sendContent.innerHTML,this.offset,',')
        }
        
        // console.log(str)
        var frontStr = str.split(',')[0]
        var afterStr = str.split(',')[1]
        if(!frontStr){
          frontStr = '<br/>'
        }
        if(!afterStr){
          afterStr = '<br/>'
        }
        
        if(groupEle.length!=0){
          groupEle[this.childLine].outerHTML = '<div use="true">' + frontStr + '</div>' + '<div use="true">' + afterStr + '</div>'
        }else{
          this.$refs.sendContent.innerHTML = '<div use="true">' + frontStr + '</div>' + '<div use="true">' + afterStr + '</div>'
        }

        //重置聚焦点
        var textbox = this.$refs.sendContent;
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(textbox);
        range.collapse(false);
        range.setStart(this.$refs.sendContent,this.childLine+1)
        range.setEnd(this.$refs.sendContent,this.childLine+1)
        sel.removeAllRanges();
        sel.addRange(range);

        this.childLine ++
      }
      
      //按回车发送时
      if(e.which==13&&!e.ctrlKey){
        var groupEle = this.$refs.sendContent.getElementsByTagName('div')
        //禁止回车换行
        this.$refs.sendContent.removeChild(groupEle[this.childLine])
        this.sendMessage()
      }
    },
    changeInput(){
      var inputHtml = this.$refs.sendContent.innerHTML
      for(var i=0;i<this.atList.length;i++){
        for(var j=0;j<this.memberList.length;j++){
          if(this.atList[i]==this.memberList[j].userId){
            var atHtml = '[@' + this.memberList[j].nickName +']'
            if(inputHtml.indexOf(atHtml)==-1){
              this.atList.splice(i,1)
              i--
            }
          }
        }
      }
      this.inputText = inputHtml
    },
    //选择推荐好友搜索好友
    changeFriendText(){
      let params = {
          userId:this.$store.state.user.id,
          friendRemarks:this.shareFriendText
      }
      //加载好友列表
      friendsList(params)
      .then(res => {
          this.friendList = res.data.data.list
      })
    },
    //选择推荐群聊搜索群聊
    changeGroupText(){
      let params = {
          pageNo:1,
          pageSize:500,
          masterId:this.$store.state.user.id,
          roomName:this.shareGroupText
      }
      //加载群聊列表
      groupList(params)
      .then(res => {
          this.shareGroupList = res.data.data.list
      })
    },
    sendMessage(){
      this.sendData = ''
      if(!this.$refs.sendContent.innerHTML||this.$refs.sendContent.innerHTML==='<div index="0"><br></div>'||this.$refs.sendContent.innerHTML==='<div use="true" index="0"><br></div>'){
        this.$refs.sendContent.innerHTML = ''
        Message({
          message: '发送内容不能为空',
          type: 'warning'
        })
        return false
      }
      
      if(this.$store.state.chatChooseItem.type==1){
        var cmd = 101
        var type = 1
      }else if(this.$store.state.chatChooseItem.type==0){
        var cmd = 103
        var type = 0
      }
      this.sendData = {
          cmd:cmd,//101是发给好友，103是发群聊
          message:{
              content:this.$refs.sendContent.innerHTML,
              contentImg:"",
              contentVideo:"",
              messageType:1,
              sendTime:new Date().getTime(),
              sendUserId:this.$store.state.user.id,
              sendUserImg:this.$store.state.user.headImg,
              sendUserName:this.$store.state.user.userName,
              toId:this.$store.state.chatChooseItem.toId,
              toUserImg:this.$store.state.chatChooseItem.toUserImg,
              toUserName:this.$store.state.chatChooseItem.toUserName,
              ext:{
                atList:this.atList
              }
          },
          type:21
        }
        console.log(JSON.stringify(this.sendData))
        console.log('sendData',this.sendData)
        // this.$store.state.socket.send(JSON.stringify(this.sendData))
        ws.send(JSON.stringify(this.sendData))
        this.$refs.sendContent.innerHTML = ''
        this.childLine = 0
        this.offset = 0
        this.rightDrawer = false
    },
    //发送图片
    sendImg(opt){
      var fd = new window.FormData()
      // 配置post请求的参数。参数名files,后面跟要传的文件，参数名fileSize，值为文件大小（看后端的具体要求）
      fd.append('fileSize', this.uploadFileData.fileSize)
      fd.append('ossKey', this.uploadFileData.ossKey)
      fd.append('files', opt.file)
      uploadFile(fd)
      .then(res => {
        this.sendData = ''
        if(this.$store.state.chatChooseItem.type==1){
          var cmd = 101
        }else if(this.$store.state.chatChooseItem.type==0){
          var cmd = 103
        }

        this.sendData = {
          cmd:cmd,
          message:{
              content:'',
              contentImg:res.data.data.path,
              contentVideo:"",
              messageType:2,
              sendTime:new Date().getTime(),
              sendUserId:this.$store.state.user.id,
              sendUserImg:this.$store.state.user.headImg,
              sendUserName:this.$store.state.user.userName,
              toId:this.$store.state.chatChooseItem.toId,
              toUserImg:this.$store.state.chatChooseItem.toUserImg,
              toUserName:this.$store.state.chatChooseItem.toUserName
          },
          type:22
        }
        // this.$store.state.socket.send(JSON.stringify(this.sendData))
        ws.send(JSON.stringify(this.sendData))
      })
    },
    //发送视频
    sendVideo(opt){
      var fd = new window.FormData()
      // 配置post请求的参数。参数名files,后面跟要传的文件，参数名fileSize，值为文件大小（看后端的具体要求）
      fd.append('fileSize', this.uploadFileData.fileSize)
      fd.append('ossKey', this.uploadFileData.ossKey)
      fd.append('files', opt.file)
      uploadFile(fd)
      .then(res => {
        this.sendData = ''
        if(this.$store.state.chatChooseItem.type==1){
          var cmd = 101
        }else if(this.$store.state.chatChooseItem.type==0){
          var cmd = 103
        }
        this.sendData = {
          cmd:cmd,
          message:{
              content:'',
              contentImg:'',
              contentVideo:res.data.data.path,
              messageType:3,
              sendTime:new Date().getTime(),
              sendUserId:this.$store.state.user.id,
              sendUserImg:this.$store.state.user.headImg,
              sendUserName:this.$store.state.user.userName,
              toId:this.$store.state.chatChooseItem.toId,
              toUserImg:this.$store.state.chatChooseItem.toUserImg,
              toUserName:this.$store.state.chatChooseItem.toUserName
          },
          type:23
        }
        // this.$store.state.socket.send(JSON.stringify(this.sendData))
        ws.send(JSON.stringify(this.sendData))
      })
    },
    //发送名片
    sendPostCard(){
      this.sendData = ''
      if(this.$store.state.chatChooseItem.type==1){
        var cmd = 101
      }else if(this.$store.state.chatChooseItem.type==0){
        var cmd = 103
      }
      if(this.shareType==1){
        var ext = {
          id:this.shareItem.friendId,
          img:this.shareItem.friendHeadImg,
          name:this.shareItem.userName,
          type:1
        }
      }else if(this.shareType==0){
        var ext = {
          id:this.shareItem.id,
          img:this.shareItem.roomImg,
          name:this.shareItem.roomName,
          type:0
        }
      }
      this.sendData = {
        cmd:cmd,
        message:{
            content:'',
            contentImg:'',
            contentVideo:'',
            messageType:4,
            sendTime:new Date().getTime(),
            sendUserId:this.$store.state.user.id,
            sendUserImg:this.$store.state.user.headImg,
            sendUserName:this.$store.state.user.userName,
            toId:this.$store.state.chatChooseItem.toId,
            toUserImg:this.$store.state.chatChooseItem.toUserImg,
            toUserName:this.$store.state.chatChooseItem.toUserName,
            ext:ext
        },
        type:24
      }
      ws.send(JSON.stringify(this.sendData))
      this.cancelShareDialog()
    },
    scrollWatch(){
      if(this.$refs.com_container.scrollTop===0){
        this.initTalkHistory()
      }
    },
    getItem(item,event){
      var event = event || window.event;
      this.contextmenuState = true
      console.log(item)
      this.mouseItem = item

      let posX = 0, posY = 0;
      if (event.pageX || event.pageY) {
          posX = event.pageX;
          posY = event.pageY;
      } else if (event.clientX || event.clientY) {
          posX = event.clientX
          posY = event.clientY
      }

      let top = posY - this.$refs.communicate.offsetTop
      let left = posX - this.$refs.communicate.offsetLeft

      this.$nextTick(()=>{
        this.$refs.contextmenuEle.style.top = top + 'px'
        this.$refs.contextmenuEle.style.left = left + 'px'
      })
    },
    //点击举报按钮
    reportBtn(){
      this.reportDialogState = true
    },
    cancelIgnoreDialog(){
      this.reportDialogState = false
    },
    insertStr(soure, start, newStr){   
      return soure.slice(0, start) + newStr + soure.slice(start);
    },
    dealContent(item){
      // item.content = '<div use="true" index="0">阿斯达四大</div><div use="true" index="1">阿萨[@爱因斯坦][@爱因斯坦]</div><div use="true" index="2">[e410][e412][@猫][e105]<br></div>'
      // console.log('dealContentItem',item)
      if(item.ext&&item.ext.atList&&item.ext.atList.length!=0){
        var atList = item.ext.atList
        atList.forEach((userId)=>{
          this.memberList.forEach((ele,index)=>{
            if(userId==ele.userId){
              var atHtml = '\\[@' + ele.nickName + '\\]'
              item.content = item.content.replace(new RegExp(atHtml,'g'), '<span style="color:#428dfc">@'+ele.nickName+' </span>')
            }
          })
        })
      }
      this.emojiList.forEach((ele,index)=>{
        var emojiHtml = '\\['+ele[0]+'\\]'
        if(item.content.indexOf(ele[0])!=-1){
          item.content = item.content.replace(new RegExp(emojiHtml,'g'), '<img class="emoji_icon" src="data:image/png;base64,'+ele[2]+'"/>')
        }
      })
      return item.content
    },
    //时间戳转日期时分
    getYMDHMS (timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let hours = time.getHours()
      let minute = time.getMinutes()
      let second = time.getSeconds()

      if (month < 10) { month = '0' + month }
      if (date < 10) { date = '0' + date }
      if (hours < 10) { hours = '0' + hours }
      if (minute < 10) { minute = '0' + minute }
      if (second < 10) { second = '0' + second }
      return month + '-' + date + ' ' + hours + ':' + minute
    },
  },
  computed: {
    newMessage() {
      return this.$store.state.message
    },
    // memberList(){
    //   return this.$store.state.groupMembersList
    // }
  },
  watch:{
    //收到消息
    newMessage(){
      console.log('收到消息触发watch',this.newMessage)

      if(!this.$store.state.chatList){
        var toId = this.newMessage.toId
        var toUserImg = this.newMessage.toUserImg
        var toUserName = this.newMessage.toUserName

        this.newMessage.toId = this.newMessage.sendUserId
        this.newMessage.toUserImg = this.newMessage.sendUserImg
        this.newMessage.toUserName = this.newMessage.sendUserName

        this.newMessage.sendUserId = toId
        this.newMessage.sendUserImg = toUserImg
        this.newMessage.sendUserName = toUserName

        this.$store.commit('setChatList',this.newMessage)
        this.$store.commit('setNav','talk')
      }

      console.log('this.sendData',this.sendData)
      console.log(this.newMessage)
      
      if(this.newMessage.type===0&&this.sendData&&(this.sendData.message.sendUserId==this.newMessage.sendUserId)){
        console.log('自己发送了一条群消息')
        this.$store.commit('chooseTalk',0)
      }else if((this.newMessage.code===0||this.newMessage.code===10001)&&this.newMessage.command=="COMMAND_CHAT_ONE_RESP"){//自己发送消息成功
        console.log('进来1了')
        console.log(this.sendData.message)
        this.sendData.message.readStatus = 0
        this.sendData.message.content = this.dealContent(this.sendData.message)
        this.sendData.message.sendTime = this.getYMDHMS(this.sendData.message.sendTime)
        this.historyList.push(this.sendData.message)

        this.sendData.message.type = this.$store.state.chatChooseItem.type
        this.sendData.message.myselfChoose = true
        this.$store.commit('setChatList',this.sendData.message)
        console.log('1结束了')
        this.$store.commit('chooseTalk',0)
      }else{//其他情况，全都要放第一位
        if(this.newMessage.type!==1&&this.newMessage.type!==0){//返回不是消息类型的实体
          if(this.newMessage.type==4){//已读好友类型
            if(this.newMessage.messageId==this.$store.state.chatChooseItem.toId){
              this.historyList.forEach((element)=>{
                  if(element.readStatus===0){
                    delete element.readStatus
                    this.$set(element,'readStatus',1)
                  }
              })
            }
          }
          return false
        }

        console.log('进来4了')

        if(this.newMessage.type==1){
          console.log(this.newMessage)
          console.log(this.$store.state.chatChooseItem)
          if(this.newMessage.sendUserId==this.$store.state.chatChooseItem.toId){
            this.newMessage.content = this.dealContent(this.newMessage)
            this.newMessage.sendTime = this.getYMDHMS(this.newMessage.sendTime)
            this.historyList.push(this.newMessage)

            var sendData = {
              cmd:105,
              ext:{
                messageId:this.newMessage.messageId,
                globalId:this.newMessage.globalId,
                sendUserId:this.$store.state.user.id,
                toUserId:this.newMessage.sendUserId,
                messageType:1
              },
              type:32
            }
            ws.send(JSON.stringify(sendData))
          }
        }else if(this.newMessage.type==0){
          if(this.newMessage.toId==this.$store.state.chatChooseItem.toId){
            this.newMessage.content = this.dealContent(this.newMessage)
            this.newMessage.sendTime = this.getYMDHMS(this.newMessage.sendTime)
            this.historyList.push(this.newMessage)
          }
        }

        var messageBlock = JSON.parse(JSON.stringify(this.newMessage))

        if(messageBlock.type==1){
          var toId = messageBlock.toId
          var toUserImg = messageBlock.toUserImg
          var toUserName = messageBlock.toUserName

          messageBlock.toId = messageBlock.sendUserId
          messageBlock.toUserImg = messageBlock.sendUserImg
          messageBlock.toUserName = messageBlock.sendUserName

          messageBlock.sendUserId = toId
          messageBlock.sendUserImg = toUserImg
          messageBlock.sendUserName = toUserName
        }else if(messageBlock.type==0){
          messageBlock.sendUserId = this.$store.state.user.id
          messageBlock.sendUserImg = this.$store.state.user.headImg
          messageBlock.sendUserName = this.$store.state.user.userName
        }

        console.log('messageBlock',messageBlock)

        this.$store.commit('setChatList',messageBlock)
        this.$store.commit('setNav','talk')
      }
      this.$nextTick(() => {
        this.$refs.com_container.scrollTop = this.$refs.pageHeight.offsetHeight
      })
    },
    '$store.state.friendList'(){
      this.friendList = this.$store.state.friendList
    },
    '$store.state.groupList'(){
      this.shareGroupList = this.$store.state.groupList
    },
    '$store.state.chatChooseItem'(){
      this.historyList = []
      this.initTalkHistory(()=>{
        setTimeout(()=>{
          this.$refs.com_container.scrollTop = this.$refs.pageHeight.offsetHeight
        },400)
      })
    },
    '$store.state.groupMembersList'(){
      if(this.$store.state.chatChooseItem.type==0){
        this.memberList = JSON.parse(JSON.stringify(this.$store.state.groupMembersList))
        console.log(this.memberList)
      }
    }
  },
  destroyed () {
      // 销毁监听
      console.log('聊天组件被摧毁')
  }
}
</script>

<style scoped>
.communicate_box{
  position:relative;
  width: 100%;
  background:rgb(243, 243, 243);
}
.com_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 20px;
  height:56px;
  background: white;
}
.com_operate{
  display: flex;
  justify-content: center;
  align-items: center;
}
.report {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.report-img {
  width: 20px;
  height: 24px;
  background-image: url("../../assets/icons/icon_shield_up.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.report-img:hover {
  background-image: url("../../assets/icons/icon_shield_hover.png");
}
.com_info{
  margin-right: 12px;
  width:20px;
  cursor: pointer;
  vertical-align: top;
}
/* 聊天组件 */
.com_container{
  width: 100%;
  height: calc(100% - 238px);
  overflow: auto;
}
.msg_box{
  padding: 10px 20px;
  display: flex;
  align-items: flex-start;
}
.com_avatar{
  width:44px;
  height:44px;
  cursor: pointer;
}
.message_box{
  padding-left:16px;
}
.message_from{
  display: flex;
  align-items: center;
  font-size:12px;
  margin-bottom:6px;
}
.send_people{
  color:#909090;
}
.send_time{
  color:rgb(196, 196, 196);
  margin:0 8px;
}
.other .send_message{
  font-size: 14px;
  line-height: 22px;
  position: relative;
  word-break: break-all;
  max-width: 26vw;
  z-index: 2;
  background: rgb(255, 255, 255);
  padding: 7px 10px;
  border-radius: 0px 4px 4px;
  float:left;
}
.other .send_message::before{
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  top: 0px;
  left:-4px;
  border-width: 4px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(255, 255, 255) rgb(255, 255, 255) transparent transparent;
}
.notice_box{
  padding: 10px 20px;
}
.notice_time,.notice_text{
  color: #c4c4c4;
  text-align: center;
  font-size:12px;
}
.msg_box.myself{
  display: flex;
  justify-content: flex-end;
}
.myself .message_from{
  justify-content: flex-end;
}
.myself .message_box{
  padding-left:0;
  padding-right:16px;
}
.myself .send_message{
  font-size: 14px;
  background: #cfe7ff;
  padding: 7px 10px;
  line-height: 22px;
  border-radius: 0 4px 4px 4px;
  position: relative;
  word-break: break-all;
  max-width: 26vw;
  z-index: 2;
  float:right;
}
.myself .send_message::before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid;
  top: 0;
  right: -4px;
  border-color: #cfe7ff transparent transparent #cfe7ff;
}
.message_state{
  position: absolute;
  font-size:14px;
  bottom:0px;
  left:-35px;
  color:#428dfc;
}
.message_state.read{
  color:#c4c4c4;
}
.file_box{
  display:flex;
  width:230px;
  height:50px;
  justify-content: space-between;
  align-items: center;
}
.file_name{
  font-size: 14px;
  color: #333;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file_size{
  font-size: 14px;
  color: #999;
}
.myself .file_icon{
  width:32px;
  height:43px;
  height:auto;
  margin-left:20px;
}
.other .file_icon{
  width:32px;
  height:43px;
  height:auto;
  margin-right:20px;
}
.share_box{
  position: relative;
  border-radius: 4px;
  background: white;
  width:208px;
  cursor: pointer;
}
.share_card{
  background-image: url('../../assets/share_bg.png');
  background-size:100% ;
  height:76px;
  display: flex;
  align-items: center;
}
.share_avatar{
  width:42px;
  height:42px;
  padding-left:16px;
  padding-right:4px;
}
.share_name{
  color:white;
  font-size:14px;
}
.share_bottom{
  display: flex;
  align-items: center;
}
.share_bottom_icon{
  width:13px;
  height: 13px;
  margin-right:4px;
  padding-left:16px;
}
.share_type{
  color:#b5b5b5;
  font-size: 14px;
}
.picture_box{
  position: relative;
  cursor: pointer;
}
.send_pic,.video_pic{
  max-width:160px;
  max-height: 250px;
}
.video_box{
  position: relative;
  text-align: center;
}
.play_icon{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:30px;
  cursor: pointer;
}
.com_write_box{
  background: white;
  margin-left:5px;
  height:180px;
}
.com_operate_line{
  padding:11px 7px;
  display: flex;
  align-items: center;
}
.operate_btn{
  width:24px;
  height:24px;
  margin:0 9px;
  background-size: 100%;
  cursor: pointer;
}

.emoji_btn {
  background-image: url("../../assets/icons/icon_smile_up.png");
}
.emoji_btn:hover {
  background-image: url("../../assets/icons/icon_smile_hover.png");
}
.picture_btn {
  background-image: url("../../assets/icons/icon_pic_up.png");
}
.picture_btn:hover {
  background-image: url("../../assets/icons/icon_pic_hover.png");
}
.file_btn {
  background-image: url("../../assets/icons/icon_file_up.png");
}
.file_btn:hover {
  background-image: url("../../assets/icons/icon_file_hover.png");
}
.video_btn {
  background-image: url("../../assets/icons/icon_video_up.png");
}
.video_btn:hover {
  background-image: url("../../assets/icons/icon_video_hover.png");
}
.share_friend_btn {
  background-image: url("../../assets/icons/icon_person_up.png");
}
.share_friend_btn:hover {
  background-image: url("../../assets/icons/icon_person_hover.png");
}
.share_group_btn {
  background-image: url("../../assets/icons/icon_group_up.png");
}
.share_group_btn:hover {
  background-image: url("../../assets/icons/icon_group_hover.png");
}
.phone_btn {
  background-image: url("../../assets/icons/icon_phone_up.png");
}
.phone_btn:hover {
  background-image: url("../../assets/icons/icon_phone_hover.png");
}
.video_phone_btn {
  background-image: url("../../assets/icons/icon_record_up.png");
}
.video_phone_btn:hover {
  background-image: url("../../assets/icons/icon_record_hover.png");
}
.call_all_btn {
  background-image: url("../../assets/icons/icon_@_up.png");
}
.call_all_btn:hover {
  background-image: url("../../assets/icons/icon_@_hover.png");
}

.chat_editor{
  border: none;
  height: 88px;
  outline: none;
  overflow: auto;
  width: 100%;
  padding: 0 19px;
  word-break: break-all;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
}
.com_send_bottom{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  box-sizing: border-box;
  padding: 0 19px;
}
.send_tips{
  padding: 0 12px;
  font-size: 12px;
  color: #999;
}

.contextmenu{
  width:110px;
  position: absolute;
  overflow: hidden;
  background: white;
  z-index: 20;
  top:30px;
  right:-50px;
}
.context_select{
  width:110px;
  height:40px;
  padding:0 20px;
  cursor: pointer;
  font-size:14px;
  color:#333;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
}
.context_select:hover{
  background: #edeff3;
}

.dialog_title{
  display: flex;
  align-items: center;
  line-height: 42px;
  padding: 0 25px 0 30px;
}
.report_box{
  border: 1px solid #f1f1f1;
  padding: 6px 7px 3px;
  border-radius: 2px;
  margin: 0 30px 30px;
  height: 180px;
}
.report_text{
  outline: none;
  border: none;
  resize: none;
  font-size: 12px;
  width: 100%;
  padding: 0;
  height: 150px;
}
.report_num{
  color: #999;
  float: right;
  padding-right: 7px;
  font-size: 12px;
}
.btns_box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.primarybtn.default{
  margin-left: 0px;
}
.primarybtn{
  margin-left:46px;
}
.choose_share_top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 20px;
}
.choose_share_title{
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.close{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.choose_share_search{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0 20px;
  margin-bottom:8px;
}
.search_icon{
  width: 20px;
  height: 20px;
  padding-left:20px;
}
.search_input{
  margin-left:2px;
  font-size:13px;
  border:none;
  width:250px;
}

.friends_box{
  overflow: auto;
  height:260px;
}
.friends_line{
  display: flex;
  align-items: center;
  height: 54px;
  padding: 10px 33px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.friends_line:hover{
  background: #edeff3;
}
.friends_avatar{
  width:34px;
  height:34px;
}
.friends_name{
  font-size:14px;
  color:#333;
  margin-left:10px;
}
.pingyin_first{
  color: #c1c1c1;
  padding-left: 33px;
  font-size: 12px;
  line-height: 20px;
  background: #fcfcfc;
}

.dialog_tips{
  line-height: 20px;
  padding: 46px 0 37px;
  text-align: center;
}
.little_tips{
  font-size: 12px;
}
.btns_box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.btns_box .primarybtn.default{
  margin-left: 0px;
}
.btns_box .primarybtn{
  margin-left:46px;
}

/* 右侧弹出框 */
.drawer_box{
  position:absolute;
  width: 360px;
  height: 100%;
  top:0;
  right:0;
  background: white;
  z-index: 10;
}
.drawer_top{
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
}
.tag_box{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex:1;
}
.tag_name{
  width:50px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  color:#666;
  font-size: 14px;
  cursor: pointer;
}
.tag_name.active{
  color: #3b8aff;
  border-bottom:3px solid #3b8aff;
}
.arrow_icon{
  width:28px;
  height: 28px;
  cursor: pointer;
}
.drawer_center{
  height: 125px;
  width: 100%;
  background: #f5f9ff;
  overflow: hidden;
  position: relative;
}
.group_avatar_box{
  position: relative;
  display: block;
  width:60px;
  height: 60px;
  margin:20px auto 15px;
}
.group_avatar{
  width:100%;
  height: 100%;
}
.upload_pic_box{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.upload_pic{
  width:30px;
}
.group_avatar_box:hover .upload_pic_box{
  display: flex;
}
.group_name_box{
  width:100px;
  margin:0 auto;
  text-align: center;
}
.group_name{
  display: inline-block;
  font-size: 14px;
  color: #333;
  max-width: 75px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.edit_icon{
  width:20px;
  cursor: pointer;
  display: none;
}
.group_name_box .edit_icon{
  vertical-align: top;
}
.group_name_box:hover .edit_icon{
  display: inline;
}
.share_icon{
  position: absolute;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.share_group{
  top: 11px;
  right: 54px;
  background-image: url('../../assets/icons/icon_share_up.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52%;
  cursor: pointer;
}
.share_qrcode{
  top: 11px;
  right: 12px;
  background-image: url('../../assets/icons/icon_code_up.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52%;
  cursor: pointer;
}
.share_group:hover{
  background-image: url('../../assets/icons/icon_share_hover.png');
}
.share_qrcode:hover{
  background-image: url('../../assets/icons/icon_code_hover.png');
}
.drawer_line{
  display: flex;
  align-items: center;
  padding:0px 20px;
  height: 40px;
}
.group_set_title{
  color: #333;
  font-size:14px;
  width:86px;
  white-space: nowrap;
}
.line_value_box{
  flex:1;
  display: flex;
  align-items: center;
}
.line_click{
  /* cursor: pointer; */
}
.line_click:hover .edit_icon{
  display: inline;
}
.line_value{
  color: #333;
  font-size:14px;
  min-width: 10px;
  min-height: 19px;
}
.disturb_text{
  color: #d6d6d6;
  margin-left: 12px;
  font-size:14px;
}
.search_in{
  position: relative;
  display: flex;
  align-items: center;
  width: 310px;
  height: 30px;
  border-radius: 17px;
  background: #f6f6f6;
  padding-left: 12px;
  display: flex;
  align-items: center;
  margin: 13px 0px 13px 20px;
  margin:13px auto;
}
.search_in_icon{
  width:20px;
}
.search_clear{
  width:20px;
  margin: 0 5px;
  cursor: pointer;
}
.search_in_input{
  border:none;
  flex:1;
  margin-left:3px;
  background: transparent;
}
.member_block{
  width: 70px;
  padding: 12px 15px 8px;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
}
.member_avatar{
  width:40px;
  height:40px;
  cursor: pointer;
}
.member_name{
  color: #666;
  line-height: 17px;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
}
.qunzhu,.qunguan{
  position: absolute;
  width: 30px;
  top:7px;
  right: 3px;
}
.member_list{
  overflow: auto;
  max-height: 662px;
}
.member_list_line{
  display: flex;
  align-items: center;
  padding: 10px 30px;
  cursor: pointer;
}
.member_list_name{
  font-size: 14px;
  padding:0px 10px;
  flex:1;
}
.group_post{
  width:30px;
}
.group_manager{
  height:calc(100% - 60px);
  position: relative;
}
.manager_line{
  justify-content: space-between;
}
.group_line_value{
  color:#333;
  font-size: 12px;
  cursor: pointer;
}
.group_btns{
  position:absolute;
  left: 0;
  bottom:20px;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.group_button{
  width: 100px;
  height: 36px;
  color: #666;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.group_button:hover{
  background: #4c94ff;
  color: #fff;
}

.card_container{
  padding: 0 30px 30px;
}
.share_card_title{
  line-height: 42px;
  padding: 0 25px 0 30px;
  font-size: 14px;
  color:#333;
}
.share_dialog_card{
  width:210px;
  height: 91px;
  border: 1px solid #4c94ff;
  border-radius:4px;
}
.share_in{
  display: flex;
  align-items: center;
  padding: 12px;
  background: url('../../assets/share_bg.png') no-repeat;
  background-size: 100% 100%;
}
.share_card_avatar{
  width: 44px;
  height: 44px;
}
.share_card_name{
  color: #fff;
  font-size: 14px;
  margin-left:10px;
}
.card_type{
  color:#4c94ff;
  font-size: 10px;
  padding-left: 10px;
}
.share_tips{
  margin-top: 10px;
  line-height: 38px;
  font-size: 12px;
}
.receiver{
  display: flex;
  align-items: center;
  margin-top:10px;
}
.receiver_avatar{
  width:40px;
  height: 40px;
}
.receiver_name{
  color:#333;
  font-size: 14px;
  margin-left:10px;
}
.share_btns{
  display: flex;
  align-items: center;
  margin-top:20px;
}
.remind_text{
  color:#3596fc;
}
.emoji_icon{
  width:20px;
  display: inline-block;
  padding: 4px;
  cursor: pointer;
}
</style>